<template>
  <div class="defaultForm">
    <el-form :model="dataForm" :rules="rules" ref="dataForm" size="small" label-width="100px">
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="grid-content">
            <el-form-item label="学院名称" prop="xyname">
              <el-input v-model="dataForm.xyname"></el-input>
            </el-form-item>
            <el-form-item label="课程名称" prop="kcname">
              <el-input v-model="dataForm.kcname"></el-input>
            </el-form-item>
            <el-form-item label="课程教师" prop="jsname">
              <el-input v-model="dataForm.jsname"></el-input>
            </el-form-item>
            <el-form-item label="课程时长" prop="kctime">
              <el-input v-model="dataForm.kctime"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12" class="row-bg">
          <div class="grid-content">
            <el-form-item label="课程封面" prop="attachmentIds">
              <el-upload
                name="file"
                class="avatar-uploader"
                action="str"
                :http-request="upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <div class="grid-content-bottom">
            <el-form-item label="课程简介" prop="kcjj">
              <el-input type="textarea" :rows="4" v-model="dataForm.kcjj"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(dataForm)">提交申请</el-button>
              <el-button @click="$router.back(-1)">返回</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      dataForm: {
        xyname: "",
        kcname: "",
        jsname: "",
        kctime: "",
        kcjj: ""
      },
      rules: {
        xyname: [{ required: true, message: "请输入学院！", trigger: "blur" }],
        kcname: [
          { required: true, message: "请输入课程名称！", trigger: "blur" }
        ],
        jsname: [
          { required: true, message: "请输入教师名称！", trigger: "blur" }
        ],
        kctime: [
          { required: true, message: "请输入课程时间！", trigger: "blur" }
        ],
        kcjj: [{ required: true, message: "请输入课程简介！", trigger: "blur" }]
      }
    };
  },
  created() {
    this.initialize();
  },
  methods: {
    // 界面初始化
    initialize() {
      this.$axios
        .post("/getedit", {
          courseid: this.$route.params.id
        })
        .then(resp => {
          console.log(resp.data[0].colloge);
          if (resp && resp.status === 200) {
            this.dataForm.kcname = resp.data[0].courseName;
            this.dataForm.jsname = resp.data[0].courseTeacher;
            this.dataForm.xyname = resp.data[0].colloge;
            this.dataForm.kctime = resp.data[0].coursetime;
            this.dataForm.kcjj = resp.data[0].synopsis;
            return;
          }
        })
        .catch(failResponse => {});
    },

    submitForm(dataForm) {
      var this_ = this;
      // this.$refs[dataForm].validate((valid) => {
      // if (valid) {
      this.$axios
        .post("/courseupdata", {
          courseid: this.$route.params.id,
          courseName: this.dataForm.kcname,
          courseTeacher: this.dataForm.jsname,
          colloge: this.dataForm.xyname,
          coursetime: this.dataForm.kctime,
          synopsis: this.dataForm.kcjj
        })
        .then(resp => {
          console.log(this.$route.params.id);
          if (resp && resp.data.code == 200) {
            this.$notify({
              title: "成功",
              message: "信息修改成功",
              type: "success"
            });
            this.initialize();
          }
        });
      // } else {
      //     console.log("error!!!");
      //     this_.$message.error("修改失败!!!");
      //     return false;
      // }
      //});
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt200K = file.size / 1024 / 200 < 1;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
      }

      if (!isLt200K) {
        this.$message.error("上传图片大小不能超过 200KB!");
      }
      return isJPG && isLt200K;
    },
    upload(item) {
      let formData = new FormData();
      formData.append("file", item.file);
      formData.append("tableCode", "book");
      formData.append("tableField", "cover");
      this.postRequest("/upload", formData).then(resp => {
        if (resp && resp.code == 200) {
          let attachment = resp.data.attachments[0];
          this.dataForm.attachmentIds[0] = attachment.id;
          this.dataForm.imgUrl = attachment.path;
          this.imageUrl = this.config.baseApi + "/" + attachment.path;
          if (success.data.msg) {
            Message.success({ message: success.data.msg });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.defaultForm {
  width: 95%;
  margin-top: 5px;
}

.grid-content {
  border-radius: 4px;
  margin: 20px;
}
.grid-content-bottom {
  border-radius: 4px;
  margin: 0px 20px 20px 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #c9c0c0;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 96px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 96px;
  height: 128px;
  display: block;
}
</style>